<template>
  <div>
    <van-popup
      v-model="show"
      position="left"
      :style="{ height: '100%', width: '80%' }"
    >
      <van-nav-bar
        class="nav"
        title="样品单号"
        left-text="返回"
        left-arrow
        @click-left="onClickLeft"
      />
      <div style="height:50px"></div>
      <!-- <van-search
        placeholder="请输入客户名称"
        @search="search"
        v-model="queryParam.Keyword"
        @clear="clear"
      /> -->
      <div class="outerBox">
        <van-list
          :immediate-check="false"
          v-model="loading"
          :finished="finished"
          finished-text="没有更多了"
          @load="onLoad"
        >
          <li
            class="ckbxcli"
            @click="customerChoice(item)"
            v-for="(item, index) in data"
            :key="index"
          >
            <p style="margin-top: 8px">
              <van-field readonly v-model="item.CustomerName" />
              <van-field readonly label="单号:" v-model="item.DocumentNo" />
              <!-- <van-field readonly label="返料规则:" v-model="item.RuleName" /> -->
            </p>
          </li>
        </van-list>
      </div>
    </van-popup>
  </div>
</template>

<script>
// import PaginationCom from "@/components/PaginationCom.vue";
import {
  Col,
  Cell,
  CellGroup,
  Picker,
  Popup,
  Search,
  NavBar,
  Field,
  Pagination
} from "vant";

export default {
  components: {
    // PaginationCom,
    "van-pagination": Pagination,
    "van-nav-bar": NavBar,
    "van-picker": Picker,
    "van-popup": Popup, //弹层
    "van-search": Search, //搜索
    "van-field": Field,
    "van-col": Col,
    "van-cell": Cell,
    "van-cell-group": CellGroup
  },
  data() {
    return {
      selectedRowKeys: [],
      queryParam: [],
      pagination: {
        current: 1,
        pageSize: 15,
        showTotal: (total, range) =>
          `总数:${total} 当前:${range[0]}-${range[1]}`,
        pageSizeOptions: ["15", "30", "60"], // 设置pageSize的可选值，页面可以通过下拉框进行选择
        showSizeChanger: true
      },
      Total: 0,
      entity: {},
      judgment: true,
      data: [],
      show: false,
      Id: "",
      PageRows: 10,
      loading: false,
      finished: false
    };
  },
  methods: {
    onLoad() {
      this.PageRows += 20;
      this.getDataList();
    },
    paginationchange(a) {
      // a:当前选中页码
      this.pagination.current = a;
      this.getDataList();
    },
    //返回
    onClickLeft() {
      this.show = false;
      this.queryParam = [];
    },
    close() {
      this.show = false;
    },
    clear() {
      this.queryParam = [];
      this.getDataList();
    },
    //搜索
    search(value) {
      console.log(value);
      this.queryParam.Condition = "cCusName";
      this.queryParam[0].Keyword = value;
      this.getDataList();
    },
    customerChoice(item) {
      console.log(item);
      this.$emit("sampleChoice", item);
      this.show = false;
    },
    getDataList() {
      this.http
        .post(
          "/SampleManagement/SPL_SampleApplyMain/GetDataListByMySelfAndMoreCondition",
          {
            PageIndex: 1,
            PageRows: this.PageRows,
            SortField: "CreateTime",
            SortType: "desc",
            Search: this.queryParam
          }
        )
        .then(resJson => {
          this.data = resJson.Data;

          this.Total = resJson.Total;
          this.loading = false;
          if (this.data.length >= resJson.Total) {
            this.finished = true;
          } else {
            this.finished = false;
          }
        });
    },
    init() {
      this.show = true;
    },
    openForm() {
      this.init();
      this.getDataList();
    }
  }
};
</script>

<style scoped>
.outerBox {
  height: calc(100vh - 50px);
  padding-bottom: 50px;
  box-sizing: border-box;
  overflow: auto;
}

.ckbxcli {
  border: 1px solid Gainsboro;
  width: 95%;

  text-align: center;
  margin-left: 2%;
  margin-top: 10px;
  padding-right: 0px;
  padding-left: 0px;
  padding-bottom: 2px;
  cursor: pointer;
  padding-top: 6px;
  list-style-type: none;
  display: inline-block;
}
.ul {
  /* margin-top: 20px; */
}
.nav {
  position: fixed !important;
  width: 100%;
}
</style>
